<template>
  <div class="energy-report">
    <div class="top-nav"></div>
    <div class="main-content">
      <div class="title-box">耗电峰谷平</div>
      <section class="top-main">
        <div class="energy-conservation">
          <div class="title-little-box">耗电报表</div>
        </div>
        <div class="equipment-operation">
          <div class="title-little-box">耗电峰谷平时段表</div>
        </div>
      </section>

      <section class="center-main">
        <div class="report-table panel1">
          <div class="inner1">
            <div class="table-option">
              <div class="table-data-box">
                <el-table
                  class="main2-table"
                  :data="tableList"
                  :cell-style="{
                    height: '50px',
                    color: '#84BFDD',
                  }"
                  :header-cell-style="{
                    background: '#102C44',
                    color: '#fff',
                    textAlign: 'center',
                    fontSize: '0.08rem',
                    heihgt: '40px',
                  }"
                  height="100%"
                >
                  <el-table-column
                    prop="time"
                    label="日期"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="high"
                    label="峰段"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="middle"
                    label="平段"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="low"
                    label="谷段"
                    align="center"
                    width="120px"
                  ></el-table-column>
                  <el-table-column
                    prop="sum"
                    label="总耗电"
                    align="center"
                  ></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
        <section class="KPIpreparation-center">
          <div class="dispatch-box">
            <span class="now-value">实际能耗</span>
            <span class="now-value">{{ ActualBudgetList.sum }}kWh</span>
          </div>
          <div class="date-check-box">
            <Vechart class="option" :options="budgetpiesOption"></Vechart>
          </div>
        </section>
        <div class="energy-analysis panel1">
          <div class="inner1">
            <div class="top-echart">
              <Vechart class="option" :options="peakHourly"></Vechart>
            </div>

            <div class="option-check">
              <span class="time_text">时间选择</span>
              <el-date-picker
                class="date-picker"
                @change="dateChange"
                :picker-options="pickerOptions"
                v-model="dateArea"
                type="date"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
          </div>
        </div>
      </section>

      <section class="bottom-main">
        <el-select
          v-model="value"
          placeholder="请选择"
          @change="yearChange"
          class="select-title"
        >
          <el-option
            v-for="item in yearList"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>

        <div class="last-page" @click="getLast('last')">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="time-line">
          <el-button
            v-for="(item, index) in dateList"
            :key="index"
            class="date-item"
            :class="{ 'current-time': currentMonth === item }"
            @click="confirmQuery(item)"
          >
            {{ item }}
          </el-button>
        </div>
        <div class="next-page" @click="getNext('next')">
          <i class="el-icon-arrow-right"></i>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import Vechart from "../../components/charts/Vcharts";
import budgetpies from "./echartsjson/budgetpies.json";
import { yearArray, getYestoday } from "../../utils/index.js";
export default {
  name: "peakAndvalley",
  props: ["tableList", "ActualBudgetList", "PeakToolList"],
  components: {
    Vechart,
  },
  data() {
    return {
      budgetpies: budgetpies,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime();
          if (maxDate) {
            this.choiceDate = "";
          }
        },
        disabledDate: (time) => {
          if (this.choiceDate !== "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.choiceDate - one;
            const maxTime = this.choiceDate + one;
            return (
              time.getTime() > Date.now() - 8.64e7 ||
              time.getTime() < minTime ||
              time.getTime() > maxTime
            );
          } else {
            return time.getTime() > Date.now() - 8.64e7;
          }
        },
      },
      dateArea: getYestoday(),
      value: new Date().getFullYear() + "",
      dateList:
        new Date().getMonth() + 1 <= 6
          ? ["1月", "2月", "3月", "4月", "5月", "6月"]
          : ["7月", "8月", "9月", "10月", "11月", "12月"],
      currentMonth: new Date().getMonth() + 1 + "月",
      year: new Date().getFullYear() + "",
      yearList: yearArray(),
    };
  },

  methods: {
    getLast() {
      this.dateList = ["1月", "2月", "3月", "4月", "5月", "6月"];
    },
    getNext() {
      this.dateList = ["7月", "8月", "9月", "10月", "11月", "12月"];
    },
    // 选择年，拼接完整的年-月
    yearChange(y) {
      var month = this.currentMonth;
      var rmonth = month.substring(0, month.length - 1);
      var finallmonth = rmonth > 9 ? rmonth : "0" + rmonth;
      let pmonth = y + "-" + finallmonth;
      this.$emit("CheckYear", pmonth);
    },
    dateChange(d) {
      this.$emit("ChangeData", d);
    },
    // 选择月，拼接完整的年-月
    confirmQuery(m) {
      this.currentMonth = m;
      var rmonth = m.substring(0, m.length - 1);
      var finallmonth = rmonth > 9 ? rmonth : "0" + rmonth;
      let pyear = this.value + "-" + finallmonth;
      this.$emit("CheckMonth", pyear);
    },
  },
  computed: {
    budgetpiesOption() {
      let datas = this.ActualBudgetList.values;
      // return this.budgetpies;
      if (datas && Object.keys(datas).length > 0) {
        return {
          ...this.budgetpies,
          tooltip: {
            trigger: "item",
            formatter: function (params) {
              let tip = "";
              // console.log(params);
              if (params.seriesIndex === 1) {
                tip = "";
              } else if (params.seriesIndex === 0) {
                tip = `${params.name} : ${params.percent} %`;
              }
              return tip;
            },
            textStyle: {
              fontSize: 20,
              color: "#84BFDD",
            },
          },
          series: [
            {
              name: "耗电分布：",
              type: "pie",
              center: ["50%", "50%"],
              radius: ["25%", "45%"],
              label: {
                show: true,
                position: "outer",
                alignTo: "labelLine",
                bleedMargin: 5,
                formatter: "{b}:({d}%)",
                fontSize: "0.12rem",
                color: "#84BFDD",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "0.12rem",
                  color: "#84BFDD",
                },
              },
              labelLine: {
                show: true,
              },
              data: [
                {
                  value: datas.high,
                  name: "峰段",
                },
                {
                  value: datas.middle,
                  name: "平段",
                },
                {
                  value: datas.low,
                  name: "谷段",
                },
              ],
            },
            {
              name: " ",
              type: "pie",
              clockwise: false,
              radius: ["70%", "70%"],
              center: ["50%", "50%"],
              data: [
                {
                  value: 10,
                  itemStyle: {
                    borderWidth: 8,
                    borderColor: "rgb(9,37,71, 0.5)",
                  },
                },
              ],
              label: {
                show: false,
              },
            },
          ],
        };
      } else {
        return this.budgetpies;
      }
    },
    peakHourly() {
      let sources = this.PeakToolList;
      return {
        dataset: {
          source: [
            ["score", "amount", "product"],
            ...sources,
            // [10, 78254, "23:00-7:00"],
            // [10, 41032, "21:00-23:00"],
            // [50, 12755, "19:00-21:00"],
            // [90, 20145, "16:30-19:00"],
            // [90, 79146, "14:00-16:30"],
            // [50, 91852, "11:30-14:00"],
            // [10, 101852, "9:00-11:30"],
            // [50, 20112, "7:00-9:00"],
          ],
        },
        grid: { containLabel: true },
        xAxis: {
          name: "kWh",
          axisPointer: {
            type: "shadow",
            color: "#0C75C6",
          },
          axisLabel: {
            color: "#84BFDD",
            fontSize: "0.08rem",
          },
          axisLine: {
            lineStyle: {
              color: "rgba(13, 143, 242, 0.3)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            // show: false,
            lineStyle: {
              color: "rgba(13, 143, 242, 0.4)",
            },
          },
        },
        yAxis: {
          type: "category",
          nameTextStyle: {
            color: "#84BFDD",
            padding: [0, 0, 10, 0],
            fontSize: "0.08rem",
          },
          axisLabel: {
            color: "#84BFDD",
            fontSize: "0.08rem",
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(13, 143, 242, 0.3)",
            },
          },
        },
        visualMap: {
          orient: "horizontal",
          top: "top",
          left: "center",
          min: 10,
          max: 100,
          text: ["峰段", "谷段"],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ["#E9EA8B", "#39A8FF", "#29DAD1"],
          },
          textStyle: {
            color: "#84BFDD",
            fontSize: "0.08rem",
          },
        },
        series: [
          {
            type: "bar",
            barWidth: "40%",
            encode: {
              // Map the "amount" column to X axis.
              x: "amount",
              // Map the "product" column to Y axis
              y: "product",
            },
            label: {
              show: true,
              position: "right",
              color: "#fff",
              fontSize: "0.08rem",
            },
          },
        ],
      };
    },
  },
};
</script>

<style lang="less" scoped>
.energy-report {
  width: 100%;
  height: 100%;
  .top-nav {
    width: 10rem;
    height: 0.41rem;
  }
  .main-content {
    width: 10rem;
    height: calc(100% - 0.5rem);
    position: relative;
    .title-box {
      position: absolute;
      font-weight: bold;
      top: 10px;
      left: 0;
      font-size: 22px;
      color: #ffffff;
      text-align: center;
      width: 220px;
      height: 44px;
      line-height: 44px;
      background: url("../../assets/img/ti.png") no-repeat center;
      background-size: cover;
    }
    .top-main {
      width: 100%;
      height: 10%;
      display: flex;
      .energy-conservation {
        width: 48%;
        height: 100%;
      }
      .equipment-operation {
        width: 60%;
        height: 100%;
        padding-left: 18%;
      }
    }
    .center-main {
      width: 100%;
      height: 80%;
      display: flex;
      justify-content: space-around;
      //   background-color: #fff;
      .energy-analysis {
        width: 36%;
        height: 100%;
        // background-color: #84bfdd;
        font-size: 20px;
        color: #fff;
        .top-echart {
          width: 100%;
          height: 90%;
        }
        .option-check {
          width: 100%;
          height: 10%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #050f23;
          user-select: none;
          .time_text {
            width: 120px;
            height: 40px;
            text-align: center;
            margin: 0 5px;
            font-size: 18px;
            color: #ffff;
            line-height: 40px;
          }
        }
      }
      .KPIpreparation-center {
        width: 24%;
        height: 100%;
        .date-check-box {
          padding-bottom: 36px;
          width: 100%;
          height: 70%;
          background: url("../../assets/img/KPIbottom.png") no-repeat bottom
            center;
          background-size: 100%;
        }
        .dispatch-box {
          width: 100%;
          height: 100px;
          background: url("../../assets/img/acnh.png") no-repeat center center;
          background-size: 100%;
          // // margin: 2% 0;
          // background-color: #25bc5f;
          text-align: center;
          justify-content: center;
          align-items: center;
          display: flex;
          font-weight: bold;
          .now-value {
            width: 30%;
            height: 100px;
            // padding-left: 16px;
            font-size: 24px;
            line-height: 100px;
            color: #60e9fd;
          }
        }
        .energy-table-box {
          width: 100%;
          height: 100px;
          font-weight: bold;
          text-align: center;

          // background-color: #1a5585;
          display: flex;
          .budget-value {
            width: 100%;
            height: 100px;
            line-height: 100px;
            font-size: 24px;
            color: #39a8ff;
            padding-left: 16px;
          }
        }
      }
      .report-table {
        width: 36%;
        height: 100%;
        color: #fff;
        font-size: 20px;
        .table-option {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          .table-data-box {
            width: 100%;
            height: 100%;
            .main2-table {
              background-color: #050f23 !important;
            }
            /deep/.el-table tr {
              background-color: #050f23 !important;
            }
            /deep/.el-table__row.statistics-warning-row {
              background: #071635 !important;
            }
            /deep/.el-table__row.normal-now {
              background: #050f23 !important;
            }
          }
          .option-check {
            width: 100%;
            height: 10%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #050f23;
            user-select: none;
            .unit {
              cursor: pointer;
              margin: 0 20px;
              width: 150px;
              height: 44px;
              line-height: 44px;
              text-align: center;
              font-size: 15px;
              color: #28c2ff;
              border-radius: 10px;
              background-color: #0a73b1;
            }
            .check-effect {
              font-weight: bold;
              color: #eee;
              background-color: #2b70b2;
            }
          }
        }
      }
    }
    .bottom-main {
      width: 100%;
      height: 10%;
      display: flex;
      position: relative;
      .last-page {
        position: absolute;
        cursor: pointer;
        text-align: center;
        color: #84bfdd;
        line-height: 44px;
        top: 50%;
        left: 30%;
        font-size: 12px;
        width: 24px;
        height: 44px;
        transform: translateY(-50%);
        background: #091c37;
        border-radius: 6px;
      }
      .confirm_export {
        position: absolute;
        cursor: pointer;
        top: 50%;
        right: 14%;
        width: 120px;
        height: 44px;
        transform: translateY(-50%);
        background: #091c37;
        border-radius: 6px;
        text-align: center;
        line-height: 44px;
        font-size: 16px;
        font-weight: bold;
        color: #28c2ff;
        border: 1px solid #0a73b1;
      }
      .next-page {
        position: absolute;
        cursor: pointer;
        text-align: center;
        color: #84bfdd;
        top: 50%;
        right: 30%;
        font-size: 12px;
        width: 24px;
        height: 44px;
        line-height: 44px;
        transform: translateY(-50%);
        background: #091c37;
        border-radius: 6px;
      }
      .select-title {
        position: absolute;
        top: 50%;
        margin-top: -18px;
        left: 14%;
        width: 120px;
        height: 44px;

        /deep/ .el-select-dropdown__wrap {
          background: #091c37;
          border: none;
        }
        /deep/ .el-select-dropdown {
          border: none;
        }
        /deep/ .popper__arrow {
          border-top-color: #091c37;
        }
        /deep/.el-input .el-input__inner {
          background: #091c37;
          color: #28c2ff;
          border-color: #0a73b1;
        }
        /deep/ .el-select .el-input .el-select__caret {
          color: #28c2ff;
        }
        /deep/ .popper__arrow::after {
          border-top-color: #091c37;
        }
        /deep/ .el-select-dropdown__item.hover {
          background-color: #0a73b1;
          color: #ffffff;
        }
      }
      .time-line {
        width: 70%;
        margin: 0 auto;
        cursor: pointer;
        height: 100%;
        background: url("../../assets/img/timeline.png") no-repeat center center;
        background-size: contain;
        display: flex;
        justify-content: center;
        align-items: center;
        .date-item {
          // width: 1rem;
          height: 44px;
          margin: 0 20px;
          text-align: center;
          background: #091c37;
          border: 1px solid #0a73b1;
          font-size: 16px;
          color: #28c2ff;
          border-radius: 6px;
          // line-height: 44px;
        }
        .current-time {
          background: #2b98ff;
          color: #fff;
          font-weight: bold;
          border: 2px solid #2b98ff;
        }
      }
    }
    .title-little-box {
      width: 680px;
      font-size: 28px;
    }
  }
}
</style>
